﻿@{
    ViewBag.Title = "TemplateTable";
    Layout = "~/Views/Shared/_Page.cshtml";
}



<h2>Template Table</h2>

<div>
    <table class="normal_table" style="width: 60%">
        <thead style="background: #66b3ff">
            <tr>
                <td style="width:10%;">Id</td>
                <td style="width: 50%;">Name</td>
                <td>Title</td>
                <td style="width: 10%;">Age</td>
            </tr>
        </thead>
        <tbody id="tmpEmployeeDest">
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        
        $.ajax({
            url: '/Employee/EmployeeList',
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                
                var employees = $.parseJSON(data);
                
                //alert(employees);

                // use template
                $('#tmpEmployeeSrc').tmpl(employees).appendTo('#tmpEmployeeDest');
            }
        });

        
    });
</script>

<!-- script template -->
<script id="tmpEmployeeSrc" type="text/x-jquery-tmpl">
    <tr>
        <td>${Id}</td>
        <td>${Name}</td>
        <td>${Title}</td>
        <td>${Age}</td>
    </tr>
</script>
